import React, {Component, useState,useEffect} from "react";
import {Text, View,Image} from "@tarojs/components";
import './fenleiList.less'
import { AtIcon, AtTabs, AtTabsPane} from 'taro-ui'
import Taro from "@tarojs/taro";
import store from "../../../store";
import http from "../../../service/api";
import {toJS} from "mobx";
import {flattenKeys} from "antd/es/table/hooks/useFilter";

const FenleiList =()=>{
    useEffect(()=>{
        click(toJS(store.firstType).id,current+1)
        console.log(store.selectNoneData)
    },[])
    const [data1,setData1]=useState(toJS(store.selectNoneData))
    const [isnull,setNull]=useState(false)
    const [tabList,setTabList] =useState([{ title: toJS(store.firstType).name }, { title: '新品' }, { title: '热销' }])
    const [current,setCurrent]=useState(0)
    const [data,setData]=useState(
        [
            {
                id: "",
                name: "",
                grade: "",
                text: "",
                sum: "",
                price: "",
                img: ""
            }
        ])
    const click=(cid,operation)=>{
        Taro.request({
            url: http.api2 + "/classification/findGoodsByFirstClass",
            method: "post",
            header: {
                'content-type': 'application/x-www-form-urlencoded' // 默认值
            },
            data: {
            cid,operation
            },
            success(res) {
                console.log(res)
                setData(res.data.goods)
                if (res.data.goods.length==0){
                    setNull(true)
                }else {
                    setNull(false)
                }
            },
            fail(err) {
                console.log("失败了")
            }
        })
    }
 
   
   const  handleClick= (value)=> {
        console.log(value+1)
      
       click(toJS(store.firstType).id,value+1)
       setCurrent(value)
       console.log(data.length)
    }
    const goodData = (item) => {
        store.setDataId(item.id)
        store.setSid(item.bid)
        Taro.navigateTo({
            url: "../../details/details"
        })
    }
    return(
        <View className="typeList">
                <AtTabs current={current} tabList={tabList} onClick={handleClick}>
                    <AtTabsPane current={current} index={0} >
                        {isnull ?
                            <View>
                                <View className="none">
                                    暂时没有结果哦！
                                </View>
                                <View className="selectLook">看看以下商品吧~</View>
                                <View className="hot">
                                    <View className="hotGoods">
                                        {data1.map((item) => {
                                            return (
                                                <View className="hotGood" onClick={() => {
                                                    goodData(item)
                                                }}>
                                                    <Image src={item.img} className="img" lazyLoad={true}/>
                                                    <View>{item.name}</View>
                                                    <View>￥{item.price}</View>
                                                </View>
                                            )
                                        })}
                                    </View>
                                </View>
                            </View> :
                            <View className="hot">
                                <View className="hotGoods">
                                    {data.map((item) => {
                                        return (
                                            <View className="hotGood" onClick={() => {
                                                goodData(item)
                                            }}>
                                                <Image src={item.img} className="img" lazyLoad={true}/>
                                                <View>{item.name}</View>
                                                <View>￥{item.price}</View>
                                            </View>
                                        )
                                    })}
                                </View>
                            </View>
                        }
                            </AtTabsPane>
                    <AtTabsPane current={current} index={1}>
                        {isnull?
                            <View>
                                <View className="none">
                                    暂时没有结果哦！
                                </View>
                                <View className="selectLook">看看以下商品吧~</View>
                                <View className="hot">
                                    <View className="hotGoods">
                                        {data1.map((item) => {
                                            return (
                                                <View className="hotGood" onClick={() => {
                                                    goodData(item)
                                                }}>
                                                    <Image src={item.img} className="img" lazyLoad={true}/>
                                                    <View>{item.name}</View>
                                                    <View>￥{item.price}</View>
                                                </View>
                                            )
                                        })}
                                    </View>
                                </View>
                            </View>
                            :
                            <View className="hot">
                            <View className="hotGoods">
                        {data.map((item) => {
                            return (
                            <View className="hotGood" onClick={() => {
                            goodData(item)
                        }}>
                            <Image src={item.img} className="img" lazyLoad={true}/>
                            <View>{item.name}</View>
                            <View>￥{item.price}</View>
                            </View>
                            )
                        })}
                            </View>
                            </View>}
                    </AtTabsPane>
                    <AtTabsPane current={current} index={2}>
                        {isnull?
                            <View>
                                <View className="none">
                                    暂时没有结果哦！
                                </View>
                                <View className="selectLook">看看以下商品吧~</View>
                                <View className="hot">
                                    <View className="hotGoods">
                                        {data1.map((item) => {
                                            return (
                                                <View className="hotGood" onClick={() => {
                                                    goodData(item)
                                                }}>
                                                    <Image src={item.img} className="img" lazyLoad={true}/>
                                                    <View>{item.name}</View>
                                                    <View>￥{item.price}</View>
                                                </View>
                                            )
                                        })}
                                    </View>
                                </View>
                            </View>
                           :
                            <View className="hot">
                            <View className="hotGoods">
                        {data.map((item,index) => {
                            return (
                            <View key={index} className="hotGood" onClick={() => {
                            goodData(item)
                        }}>
                            <Image src={item.img} className="img" lazyLoad={true}/>
                            <View>{item.name}</View>
                            <View>￥{item.price}</View>
                            </View>
                            )
                        })}
                            </View>
                            </View>}
                    </AtTabsPane>
                </AtTabs>
           
        </View>
    )
}
export default FenleiList